<template>
  <el-container class="admin-layout">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'" class="admin-aside">
      <div class="aside-logo">
        <!-- <img src="/static/img/logo.png" alt="Logo" v-if="!isCollapse"/> -->
        <span>{{ isCollapse ? '小周' : '大数据后台管理系统' }}</span>
      </div>
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          router
          unique-opened
        >
          <!-- 菜单项示例 -->
          <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>导航一</span>
            </template>
            <el-menu-item index="/admin/dashboard">
              <el-icon><Menu /></el-icon>
              <span>仪表盘</span>
            </el-menu-item>
            <el-menu-item index="/admin/users">
               <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
          </el-sub-menu> -->
          <el-menu-item index="/admin/home">
            <el-icon><HomeFilled /></el-icon>
            <template #title>主页</template>
          </el-menu-item>
          <el-menu-item index="/admin/data">
            <el-icon><DataAnalysis /></el-icon>
            <template #title>数据治理区</template>
          </el-menu-item>
          <el-menu-item index="/admin/about">
            <el-icon><setting /></el-icon>
            <template #title>个人信息</template>
          </el-menu-item>
          <!-- 在这里添加更多菜单项 -->
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="admin-header">
        <div class="header-left">
           <el-icon class="collapse-icon" @click="toggleCollapse">
             <Expand v-if="isCollapse" />
             <Fold v-else />
           </el-icon>
           <!-- <span>欢迎使用后台管理系统</span> -->
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar size="small" :src="userInfo.avatar" />
              <span style="margin-left: 8px;">{{ userInfo.username }}</span>
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/')">返回主页</el-dropdown-item>
                <el-dropdown-item @click="router.push('/admin/about')">个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容区域 -->
      <el-main class="admin-main">
        <!-- 子路由出口 -->
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, createApp, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  Location,
  Setting,
  Menu,
  User,
  Expand,
  Fold,
  ArrowDown,
  HomeFilled,
  DataAnalysis
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus'; // 引入消息提示和确认框
import { useStore } from '../../store/index.js';
import { init } from 'echarts';

const route = useRoute();
const router = useRouter();
const store = useStore()

// --- 侧边栏状态 ---
const isCollapse = ref(false); // 控制侧边栏折叠

// --- 当前激活菜单 ---
// 计算属性，根据当前路由路径确定激活的菜单项
const activeMenu = computed(() => {
  const { path } = route;
  return path;
});

// --- 方法 ---
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const logout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 在这里执行实际的退出登录操作
      // 例如：清除 token、调用退出 API 等
      ElMessage({
        type: 'success',
        message: '退出成功',
      });
      // 跳转回登录页
      localStorage.clear();
      router.push('/login');
    })
    .catch(() => {
      // 用户取消操作
      // ElMessage({
      //   type: 'info',
      //   message: '已取消退出',
      // });
    });
};
const userInfo = ref({
  username: '',
  avatar: '',
})
const checkUserInfo = () => {
  
  // const userinfo = sessionStorage.getItem('userInfo');
  if (!JSON.parse(localStorage.getItem('userInfo'))) {
    ElMessage({
      type: 'warning',
      message: '请先登录', 
    })
    router.push('/login');
    return
  }
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'));
}
onBeforeMount(() => {
  checkUserInfo();
})

// --- 占位图片路径 (你需要将图片放到 public/static/img/ 目录下) ---
// const logoUrl = '/static/img/logo.png';
// const avatarUrl = '/static/img/avatar.png';

</script>

<style scoped>
.admin-layout {
  height: 100vh;
}

.admin-aside {
  background-color: #304156; /* 深色侧边栏背景 */
  transition: width 0.28s;
  overflow-x: hidden; /* 防止折叠时内容溢出 */
}

.aside-logo {
  height: 60px; /* 与 Header 高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden;
}
.aside-logo img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

/* 隐藏滚动条轨道，但保留滚动功能 */
.admin-aside .el-scrollbar {
  height: calc(100vh - 60px); /* 减去 logo 区域高度 */
}
.admin-aside .el-menu {
  border-right: none; /* 移除 el-menu 的默认右边框 */
}
/* 折叠时菜单标题隐藏 */
.el-menu--collapse .el-sub-menu__title span,
.el-menu--collapse .el-menu-item span {
  display: none;
}
/* 折叠时箭头的样式调整 */
.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}


.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  height: 60px;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}
.collapse-icon {
  font-size: 22px;
  cursor: pointer;
  margin-right: 15px;
}


.header-right {
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #333;
}
.el-avatar {
  margin-right: 8px;
}

.admin-main {
  background-color: #f0f2f5; /* 主内容区背景色 */
  padding: 20px;
  /* 如果需要内部滚动条 */
  /* overflow-y: auto;
  height: calc(100vh - 60px); */
}

/* --- 路由切换动画 --- */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>